<template>
  <div>
    <el-table :data="users">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="fullName" label="全名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="birthDate" label="生日"></el-table-column>
      <el-table-column prop="undergraduateSchool" label="本科院校"></el-table-column>
      <el-table-column prop="targetUniversity" label="目标院校"></el-table-column>
      <el-table-column prop="personalBio" label="个人签名"></el-table-column>
      <el-table-column prop="role" label="角色"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import axios from '../plugins/axios'

const users = ref([])

const fetchUsers = async () => {
  try {
    const response = await axios.get('/users/all')
    users.value = response.data
  } catch (error) {
    console.error('Failed to fetch users:', error)
  }
}

onMounted(() => {
  fetchUsers()
})
</script>

<style scoped>
.el-table {
  width: 100%;
}
</style>